import { CopyLink, Download } from "@icon-park/react";
import "./VideoInfo.css";
export default function VideoInfo({
  title,
  liked,
  likeCount,
  handleLike,
  commentCount,
  handleComment,
  stared,
  starCount,
  handleStar,
  handleMouseEnter,
  handleMouseLeave,
  handleShareButtonClick,
  showPopup,
  handleSaveToLocal,
  handleCopyLink,
}) {
  return (
    <div className="VideoInfo-container">
      <div className="Videoinfo-title">{title}</div>

      <div className="VideoInfo-buttons">
        <div className="VideoInfo-button" onClick={handleLike}>
          <div className={`heart ${liked ? "liked" : ""}`}></div>
          {likeCount}
        </div>
        <div className="VideoInfo-button" onClick={handleComment}>
          <div className="comment"></div>
          {commentCount}
        </div>
        <div className="VideoInfo-button" onClick={handleStar}>
          <div className={`star ${stared ? "stared" : ""}`}></div>
          {starCount}
        </div>
        <div
          className="VideoInfo-button"
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <div className="share" onClick={handleShareButtonClick}></div>
          {showPopup && (
            <div className="popup" style={{ top: "-110px", left: "50%" }}>
              <button className="popup-button" onClick={handleSaveToLocal}>
                <Download
                  theme="outline"
                  size="29"
                  fill="#000000"
                  strokeWidth={3}
                />
                保存本地
              </button>
              <button className="popup-button" onClick={handleCopyLink}>
                <CopyLink
                  theme="outline"
                  size="29"
                  fill="#000000"
                  strokeWidth={3}
                />
                复制链接
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
